/* stylelint-disable at-rule-no-unknown,at-rule-empty-line-before,no-duplicate-selectors */
@import "../../../style/default";

// mixins for grid system
// ------------------------
@mixin make-row($gutter: $grid-gutter-width) {
  position: relative;
  margin-left: ($gutter / -2);
  margin-right: ($gutter / -2);
  height: auto;
  @include clearfix;
}

$make-grid-list: () !default;

$make-grid-list: map_merge(
    (
      ""  : null      ,
      -xs  : $screen-xs,
      -sm  : $screen-sm,
      -md  : $screen-md,
      -lg  : $screen-lg,
    ),
    $make-grid-list
);

%make-grid-base {
  position: relative;
  min-height: 1px;
  padding-left: ($grid-gutter-width / 2);
  padding-right: ($grid-gutter-width / 2);
}

%make-col-base {
  float: left;
  flex: 0 0 auto;
}

@for $i from 1 through $grid-columns {
  @each $grid-name in map_keys($make-grid-list) {
    .#{$cls}-col#{$grid-name}-#{$i} {
      @extend %make-grid-base;
    }
  }
}
//}

@for $i from 1 through $grid-columns {
  .#{$cls}-col-#{$i} {
    @extend %make-col-base;
  }
}


// lesshint false
@mixin loop-grid-columns($class) {

  @for $i from $grid-columns through 1 {
    .#{$style-prefix}-col#{$class}-#{$i} {
      display: block;
      box-sizing: border-box;
      width: percentage(($i / $grid-columns));
    }
    .#{$style-prefix}-col#{$class}-push-#{$i} {
      left: percentage(($i / $grid-columns));
    }
    .#{$style-prefix}-col#{$class}-pull-#{$i} {
      right: percentage(($i / $grid-columns));
    }
    .#{$style-prefix}-col#{$class}-offset-#{$i} {
      margin-left: percentage(($i / $grid-columns));
    }
    .#{$style-prefix}-col#{$class}-order-#{$i} {
      order: $i;
    }
  }

  .#{$style-prefix}-col#{$class}-0 {
    display: none;
  }
  .#{$style-prefix}-col#{$class}-push-0 {
    left: auto;
  }
  .#{$style-prefix}-col#{$class}-pull-0 {
    right: auto;
  }
  .#{$style-prefix}-col#{$class}-offset-0 {
    margin-left: 0;
  }
  .#{$style-prefix}-col#{$class}-order-0 {
    order: 0;
  }
}

.#{$style-prefix}-col-push-0 {
  left: auto;
}
.#{$style-prefix}-col-pull-0 {
  right: auto;
}

@mixin make-grid($class: "") {
  @include loop-grid-columns($class);
}

@include make-grid();

@each $grid-name, $grid-size in $grid-list {
  @media (min-width: $grid-size) {

    %media-#{$grid-name} {
      float: left;
      flex: 0 0 auto;
    }

    @for $i from 1 through $grid-columns {
      .#{$cls}-col-#{$grid-name}-#{$i} {
        @extend %media-#{$grid-name};
      }
    }

    @include make-grid(-#{$grid-name});
  }
}
